import { useState, useEffect } from 'react';
import { ProCard, StatisticCard } from '@ant-design/pro-components';
import {
  Row, Col, Card, List, Avatar, Tag, Typography, Button,
  Badge, Tooltip, Modal, Space, FloatButton, message
} from 'antd';
import {
  UserOutlined,
  CarOutlined,
  TeamOutlined,
  CloudOutlined,
  CalendarOutlined,
  EnvironmentOutlined,
  MessageOutlined,
  ReloadOutlined,
  WarningOutlined,
  FileTextOutlined,
  DollarOutlined,
  PlusOutlined,
  SearchOutlined,
  SettingOutlined,
  BookOutlined,
  ClockCircleOutlined,
  TeamOutlined as TeamIcon,
} from '@ant-design/icons';
import { Line } from '@ant-design/plots';
import dayjs from 'dayjs';

const { Statistic } = StatisticCard;
const { Text } = Typography;

interface Course {
  id: string;
  name: string;
  type: string;
  time: string;
  location: string;
  instructor: string;
  students: number;
  status: 'upcoming' | 'ongoing' | 'completed';
}

const cardStyle = {
  background: '#fff',
  borderRadius: '8px',
  boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
  height: '100%',
};

const Home: React.FC = () => {
  const [location, setLocation] = useState('正在定位...');
  const [dailyQuote, setDailyQuote] = useState('正在加载...');
  const [notifications, setNotifications] = useState([
    { id: 1, type: 'warning', content: '车辆A-12345年检即将到期', time: '2天后' },
    { id: 2, type: 'info', content: '科目二考试预约开始', time: '3天后' },
    { id: 3, type: 'warning', content: '教练B-789驾驶证即将到期', time: '5天后' },
  ]);

  useEffect(() => {
    // 获取一言
    fetch('https://v1.hitokoto.cn/')
      .then(response => response.json())
      .then((data: any) => {
        setDailyQuote(data.hitokoto);
      })
      .catch(() => {
        setDailyQuote('今天也要加油哦！');
      });

    // 模拟获取位置
    setTimeout(() => {
      setLocation('北京市海淀区');
    }, 1000);
  }, []);

  // 模拟数据
  const recentCourses: Course[] = [
    {
      id: '1',
      name: '科目二场地训练',
      type: '实操课程',
      time: '2024-03-20 14:00',
      location: '训练场A区',
      instructor: '张教练',
      students: 4,
      status: 'ongoing'
    },
    {
      id: '2',
      name: '科目一理论培训',
      type: '理论课程',
      time: '2024-03-20 16:00',
      location: '多媒体教室',
      instructor: '李教练',
      students: 12,
      status: 'upcoming'
    },
    {
      id: '3',
      name: '科目三道路训练',
      type: '实操课程',
      time: '2024-03-19 09:00',
      location: '训练场B区',
      instructor: '王教练',
      students: 3,
      status: 'completed'
    }
  ];

  const getStatusColor = (status: Course['status']) => {
    switch (status) {
      case 'ongoing':
        return 'processing';
      case 'upcoming':
        return 'warning';
      case 'completed':
        return 'success';
      default:
        return 'default';
    }
  };

  const getStatusText = (status: Course['status']) => {
    switch (status) {
      case 'ongoing':
        return '进行中';
      case 'upcoming':
        return '即将开始';
      case 'completed':
        return '已完成';
      default:
        return status;
    }
  };

  return (
    <div style={{ padding: '24px', background: '#f0f2f5', minHeight: '100vh' }}>
      {/* 顶部信息栏 */}
      <Row gutter={[16, 16]}>
        <Col span={6}>
          <Card bordered={false} style={cardStyle}>
            <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
              <CloudOutlined style={{ fontSize: '24px', color: '#1890ff', marginRight: '12px' }} />
              <div>
                <div style={{ fontSize: '16px', fontWeight: 'bold' }}>北京</div>
                <div style={{ color: '#666' }}>晴 26°C</div>
              </div>
            </div>
          </Card>
        </Col>
        <Col span={6}>
          <Card bordered={false} style={cardStyle}>
            <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
              <EnvironmentOutlined style={{ fontSize: '24px', color: '#52c41a', marginRight: '12px' }} />
              <div>
                <div style={{ fontSize: '16px', fontWeight: 'bold' }}>当前位置</div>
                <div style={{ color: '#666' }}>{location}</div>
              </div>
            </div>
          </Card>
        </Col>
        <Col span={6}>
          <Card bordered={false} style={cardStyle}>
            <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
              <CalendarOutlined style={{ fontSize: '24px', color: '#722ed1', marginRight: '12px' }} />
              <div>
                <div style={{ fontSize: '16px', fontWeight: 'bold' }}>
                  {dayjs().format('YYYY年MM月DD日')}
                </div>
                <div style={{ color: '#666' }}>
                  {dayjs().format('dddd')}
                </div>
              </div>
            </div>
          </Card>
        </Col>
        <Col span={6}>
          <Card bordered={false} style={cardStyle}>
            <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
              <MessageOutlined style={{ fontSize: '24px', color: '#faad14', marginRight: '12px' }} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: '16px', fontWeight: 'bold', marginBottom: '4px' }}>每日一言</div>
                <Text style={{ color: '#666', fontSize: '14px' }}>
                  {dailyQuote}
                </Text>
              </div>
            </div>
          </Card>
        </Col>
      </Row>

      {/* 统计卡片 */}
      <Row gutter={[16, 16]} style={{ marginTop: '24px' }}>
        <Col span={8}>
          <Card bordered={false} style={cardStyle}>
            <Statistic
              title={
                <Space>
                  <span>总学员数</span>
                  <Tooltip title="刷新数据">
                    <Button type="text" icon={<ReloadOutlined />} />
                  </Tooltip>
                </Space>
              }
              value={1234}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#3f8600' }}
            />
            <div style={{ marginTop: '16px', padding: '12px', background: '#fafafa', borderRadius: '4px' }}>
              <Text type="secondary">流失率: 5.2%</Text>
              <div style={{ marginTop: '8px' }}>
                <Text type="secondary">较上月: </Text>
                <Text type="success">↓ 0.8%</Text>
              </div>
            </div>
          </Card>
        </Col>
        <Col span={8}>
          <Card bordered={false} style={cardStyle}>
            <Statistic
              title={
                <Space>
                  <span>在训车辆</span>
                  <Tooltip title="刷新数据">
                    <Button type="text" icon={<ReloadOutlined />} />
                  </Tooltip>
                </Space>
              }
              value={25}
              prefix={<CarOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
            <div style={{ marginTop: '16px', padding: '12px', background: '#fafafa', borderRadius: '4px' }}>
              <Space direction="vertical" style={{ width: '100%' }}>
                <Badge status="success" text="使用中: 18" />
                <Badge status="warning" text="维修中: 5" />
                <Badge status="error" text="待检: 2" />
              </Space>
            </div>
          </Card>
        </Col>
        <Col span={8}>
          <Card bordered={false} style={cardStyle}>
            <Statistic
              title={
                <Space>
                  <span>教练人数</span>
                  <Tooltip title="刷新数据">
                    <Button type="text" icon={<ReloadOutlined />} />
                  </Tooltip>
                </Space>
              }
              value={15}
              prefix={<TeamOutlined />}
              valueStyle={{ color: '#722ed1' }}
            />
            <div style={{ marginTop: '16px', padding: '12px', background: '#fafafa', borderRadius: '4px' }}>
              <Text type="secondary">教学合格率: 92%</Text>
              <div style={{ marginTop: '8px' }}>
                <Text type="secondary">较上月: </Text>
                <Text type="success">↑ 2.5%</Text>
              </div>
            </div>
          </Card>
        </Col>
      </Row>

      {/* 最近课程动态 */}
      <Card bordered={false} style={{ ...cardStyle, marginTop: '24px' }}>
        <div style={{ padding: '16px' }}>
          <div style={{ fontSize: '16px', fontWeight: 'bold', marginBottom: '16px' }}>最近课程动态</div>
          <List
            itemLayout="horizontal"
            dataSource={recentCourses}
            renderItem={(item) => (
              <List.Item
                style={{ padding: '12px 0' }}
                actions={[
                  <Button 
                    key="view" 
                    type="link" 
                    icon={<FileTextOutlined />}
                  >
                    查看详情
                  </Button>
                ]}
              >
                <List.Item.Meta
                  avatar={<Avatar icon={<BookOutlined />} />}
                  title={item.name}
                  description={
                    <Space direction="vertical" size={0}>
                      <Space>
                        <ClockCircleOutlined />
                        <Text type="secondary">{item.time}</Text>
                      </Space>
                      <Space>
                        <EnvironmentOutlined />
                        <Text type="secondary">{item.location}</Text>
                      </Space>
                    </Space>
                  }
                />
                <Space direction="vertical" align="end" style={{ marginRight: 16 }}>
                  <Tag color={getStatusColor(item.status)}>
                    {getStatusText(item.status)}
                  </Tag>
                  <Space>
                    <TeamIcon />
                    <Text type="secondary">{item.instructor}</Text>
                    <Text type="secondary">|</Text>
                    <Text type="secondary">{item.students}人</Text>
                  </Space>
                </Space>
              </List.Item>
            )}
          />
        </div>
      </Card>

      {/* 快捷操作悬浮窗 */}
      <FloatButton.Group
        trigger="hover"
        style={{ right: 24, bottom: 24 }}
        icon={<PlusOutlined />}
      >
        <FloatButton
          icon={<SearchOutlined />}
          tooltip="快速查询"
        />
        <FloatButton
          icon={<SettingOutlined />}
          tooltip="系统设置"
        />
      </FloatButton.Group>
    </div>
  );
};

export default Home;
